<!doctype html>
<html>
    <head>
        <meta charset="utf-8">

        <title>InkJS - Tabs samples</title>

        <link rel="stylesheet" href="../../../../../../dist/css/ink.css" />

        <script type="text/javascript" src="../../../../Ink/1/lib.js"></script>
        <script>
            Ink.setPath('Ink', '../../../../Ink/');
        </script>
        <script type="text/javascript" src="../../../../../../dist/js/prettify.js"></script>
        <style>
            pre.prettyprint{
                font-size: 0.75em;
            }
        </style>
    </head>

    <body onload="prettyPrint()">
        <nav class="ink-navigation ink-container">
            <ul class="menu horizontal black flat">
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
        </nav>
        <div class="ink-container ink-grid">
            <h1>Tabs Samples - InkJS</h1>

            <section>
                <header>
                    <h2>Tabs #1 - Default Markup</h2>
                </header>
                <div class="ink-tabs top">
                    <ul class="tabs-nav">
                        <li><a href="#homae">Home</a></li>
                        <li><a href="#news">News</a></li>
                        <li><a href="#description">Description</a></li>
                        <li><a href="#stuff">Stuff</a></li>
                        <li><a href="#more_stuff">More stuff</a></li>
                    </ul>
                    <div id="home" class="tabs-content">
                        <h4>Home</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="news" class="tabs-content">
                        <h4>News</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="description" class="tabs-content">
                        <h4>Description</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="stuff" class="tabs-content">
                        <h4>Stuff</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="more_stuff" class="tabs-content">
                        <h4>More Stuff</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                </div>
                <p>
                    <pre class="prettyprint linenums">&lt;div class="ink-tabs top"&gt;
    &lt;ul class="tabs-nav"&gt;
        &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#news"&gt;News&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#description"&gt;Description&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#stuff"&gt;Stuff&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#more_stuff"&gt;More stuff&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="home" class="tabs-content"&gt;
        &lt;h4&gt;Home&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="news" class="tabs-content"&gt;
        &lt;h4&gt;News&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="description" class="tabs-content"&gt;
        &lt;h4&gt;Description&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="stuff" class="tabs-content"&gt;
        &lt;h4&gt;Stuff&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="more_stuff" class="tabs-content"&gt;
        &lt;h4&gt;More Stuff&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
    new Ink.UI.Tabs('.ink-tabs');
&lt;/script&gt;</pre>
                </p>
            </section>

            <section>
                <header>
                    <h2>Tabs #2 - Placed on the bottom</h2>
                </header>
                <div class="ink-tabs bottom">
                    <div id="home2" class="tabs-content">
                        <h4>Home</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="news2" class="tabs-content">
                        <h4>News</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="description2" class="tabs-content">
                        <h4>Description</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="stuff2" class="tabs-content">
                        <h4>Stuff</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="more_stuff2" class="tabs-content">
                        <h4>More Stuff</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <ul class="tabs-nav">
                        <li><a href="#home2">Home</a></li>
                        <li><a href="#news2">News</a></li>
                        <li><a href="#description2">Description</a></li>
                        <li><a href="#stuff2">Stuff</a></li>
                        <li><a href="#more_stuff2">More stuff</a></li>
                    </ul>
                </div>
                <p>
                    <pre class="prettyprint linenums">&lt;div class="ink-tabs bottom"&gt;
    &lt;div id="home2" class="tabs-content"&gt;
        &lt;h4&gt;Home&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="news2" class="tabs-content"&gt;
        &lt;h4&gt;News&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="description2" class="tabs-content"&gt;
        &lt;h4&gt;Description&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="stuff2" class="tabs-content"&gt;
        &lt;h4&gt;Stuff&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="more_stuff2" class="tabs-content"&gt;
        &lt;h4&gt;More Stuff&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;ul class="tabs-nav"&gt;
        &lt;li&gt;&lt;a href="#home2"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#news2"&gt;News&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#description2"&gt;Description&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#stuff2"&gt;Stuff&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#more_stuff2"&gt;More stuff&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;script&gt;
    new Ink.UI.Tabs('.ink-tabs');
&lt;/script&gt;</pre>
                </p>
            </section>

            <section>
                <header>
                    <h2>Tabs #3 - Placed on the left</h2>
                </header>
                <div class="ink-tabs left">
                    <ul class="tabs-nav">
                        <li><a href="#home3">Home</a></li>
                        <li><a href="#news3">News</a></li>
                        <li><a href="#description3">Description</a></li>
                        <li><a href="#stuff3">Stuff</a></li>
                        <li><a href="#more_stuff3">More stuff</a></li>
                    </ul>
                    <div id="home3" class="tabs-content">
                        <h4>Home</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="news3" class="tabs-content">
                        <h4>News</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="description3" class="tabs-content">
                        <h4>Description</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="stuff3" class="tabs-content">
                        <h4>Stuff</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="more_stuff3" class="tabs-content">
                        <h4>More Stuff</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                </div>
                <br clear="all" />
                <p>
                    <pre class="prettyprint linenums">&lt;div class="ink-tabs left"&gt;
    &lt;ul class="tabs-nav"&gt;
        &lt;li&gt;&lt;a href="#home3"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#news3"&gt;News&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#description3"&gt;Description&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#stuff3"&gt;Stuff&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#more_stuff3"&gt;More stuff&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="home3" class="tabs-content"&gt;
        &lt;h4&gt;Home&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="news3" class="tabs-content"&gt;
        &lt;h4&gt;News&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="description3" class="tabs-content"&gt;
        &lt;h4&gt;Description&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="stuff3" class="tabs-content"&gt;
        &lt;h4&gt;Stuff&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="more_stuff3" class="tabs-content"&gt;
        &lt;h4&gt;More Stuff&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
    new Ink.UI.Tabs('.ink-tabs');
&lt;/script&gt;</pre>
                </p>
            </section>

            <section>
                <header>
                    <h2>Tabs #4 - Placed on the right</h2>
                </header>
                <div class="ink-tabs right">
                    <ul class="tabs-nav">
                        <li><a href="#home4">Home</a></li>
                        <li><a href="#news4">News</a></li>
                        <li><a href="#description4">Description</a></li>
                        <li><a href="#stuff4">Stuff</a></li>
                        <li><a href="#more_stuff4">More stuff</a></li>
                    </ul>
                    <div id="home4" class="tabs-content">
                        <h4>Home</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="news4" class="tabs-content">
                        <h4>News</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="description4" class="tabs-content">
                        <h4>Description</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="stuff4" class="tabs-content">
                        <h4>Stuff</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                    <div id="more_stuff4" class="tabs-content">
                        <h4>More Stuff</h4>
                        <p>Arnold ipsum (...)</p>
                    </div>
                </div>
                <br clear="all" />
                <p>
                    <pre class="prettyprint linenums">&lt;div class="ink-tabs right"&gt;
    &lt;ul class="tabs-nav"&gt;
        &lt;li&gt;&lt;a href="#home4"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#news4"&gt;News&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#description4"&gt;Description&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#stuff4"&gt;Stuff&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#more_stuff4"&gt;More stuff&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="home4" class="tabs-content"&gt;
        &lt;h4&gt;Home&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="news4" class="tabs-content"&gt;
        &lt;h4&gt;News&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="description4" class="tabs-content"&gt;
        &lt;h4&gt;Description&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="stuff4" class="tabs-content"&gt;
        &lt;h4&gt;Stuff&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="more_stuff4" class="tabs-content"&gt;
        &lt;h4&gt;More Stuff&lt;/h4&gt;
        &lt;p&gt;Arnold ipsum (...)&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
    new Ink.UI.Tabs('.ink-tabs');
&lt;/script&gt;</pre>
                </p>
            </section>
        </div>
        <script>
            Ink.requireModules(['Ink.Util.Array_1','Ink.UI.Tabs_1'], function(InkArray, Tabs) {
                InkArray.each(Ink.ss('.ink-tabs'),function(item){
                    new Tabs(item);
                });
            });
        </script>
    </body>
</html>
